---
title: 'Learning Web Development from YouTube'
publishedAt: '2021-01-20'
description: 'List of youtuber channels that I watched to learn Web Development.'
banner: 'youtube-list_z18lll'
tags: 'tips'
---

## Introduction

May 2020 is the first time I started learning web development. In the beginning, I learn from a [Udemy Course](https://www.udemy.com/course/the-complete-web-development-bootcamp/) by Angela Yu. In my opinion, that course is really great, but it is a very long course, about 54 hours. This course is really good if you really have no clue about Web Development because she explains it thoroughly.

But, that only course is not enough, there are some materials that are outdated and she teach the styling with bootstrap and skipped the fundamental of CSS. I cover all of that with these youtube channels.

## HTML CSS

- [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw) → This channels cover so many fundamentals of CSS, I learned so much from this channel. I also follow his best practice in writing CSS
- [Design Course](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow) → Focuses on how to design a website
- [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw) → Really good for beginners because he covers basic stuff
- [Dev Ed](https://www.youtube.com/c/DevEd/videos) → There are some video that covers common layouting in HTML and CSS
- [The Net Ninja](https://www.youtube.com/c/TheNetNinja/featured) → There is a crash course on HTML CSS
- [My Blog](/blog) → I have a blog series about html/css called Back to Basic. Be sure to check it out 🥳

## JavaScript

- [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) → There are so many stuff besides JavaScript like React
- [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA) → Check out the Higher Order Function (like map, foreach, filter), also check his project with Vanilla Javascript
- [codeSTACKr](https://www.youtube.com/c/codeSTACKr/videos) → Check the [Javascript in 90 seconds](https://www.youtube.com/watch?v=bGDK1rpykOQ) series, there are also some crash courses and some fundamental stuff like this, async await, fetch api

## TypeScript

- [Jack Herrington](https://youtube.com/c/JackHerrington) → Awesome content for learning typescript. Check out the [No BS TS](https://youtube.com/playlist?list=PLNqp92_EXZBJYFrpEzdO2EapvU0GOJ09n) playlist

## React.js

- [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) → There is a React Course that is released in early 2021 (very recommended)
- [Dev Ed](https://www.youtube.com/c/DevEd/videos) → Nice content on Advanced React like Context, Reducer
- [The Net Ninja](https://www.youtube.com/c/TheNetNinja/featured) → This Channel also has an ongoing course on React
- [James Q Quick](https://www.youtube.com/channel/UC-T8W79DN6PBnzomelvqJYw) → Some of Gatsby course if you are interested, I personally choose Next.js over Gatsby
- [Kent C. Dodds](https://kentcdodds.com/) → Not really a youtube channel, but his blog and course is really awesome

## Next.js

- [Lee Robinson](https://www.youtube.com/channel/UCZMli3czZnd1uoc1ShTouQw) → Great explaining on Next.js, he actually worked for Vercel he also have a course which called [React 2025](https://www.youtube.com/watch?v=JCOPVq2AYXc&list=PL6bwFJ82M6FXgctyoWXqj7H0GK8_YIeF1) using Next.js and Firestore
- [Colby Fayock](https://youtube.com/colbz) → Overall a great and unique content
- [Leigh Halleday](https://youtube.com/c/leighhalliday) → A lot of great content using Next.js
- [Ben Awad](https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw) → Great videos, but he uses some stack that is not familiar for beginners like Typescript and GraphQL

## Animation in React

- [Wrong Akram](https://www.youtube.com/channel/UCqrxiLP9RHz2GxDJaZuTRBw) → Many materials on GSAP, framer-motion and some other libraries
- [Sam Selikoff](https://www.youtube.com/c/SamSelikoff/videos) → Focus on Framer Motion and Tailwindcss

## Additional Resources

- [Austin Shelby](https://www.youtube.com/channel/UCGyjrq09z9tblkAzvsHtHtg) → explains design pattern using Tailwindcss
- [Jason Lengstorf](https://www.youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A) → Check his 90 minutes stream that covers a lot of topic. Also check out his [react-query video](https://www.youtube.com/watch?v=DocXo3gqGdI&t=3837s): it pretty similiar with SWR for data fetching and caching
- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) → A lot of 'quick course' in 10 or 1 minute to give you knowledge about other tech stack

## Courses that I Have Completed

Course is sorted based on the first one I completed:

1. [The Complete 2020 Web Development Bootcamp](https://www.udemy.com/course/the-complete-web-development-bootcamp/) → long duration, great materials, some of them are outdated
2. [The Complete Node.js Developer](https://www.udemy.com/course/the-complete-nodejs-developer-course-2/) → Very recommended if you are interested in learning backend language with MongoDB
3. [User Experience Design Essentials - Adobe XD UI UX Design](https://www.udemy.com/course/ui-ux-web-design-using-adobe-xd/) → Course to learn how to use Adobe XD, I prefer Figma more because it's free
4. [Learn Figma - UI/UX Design Essential Training](https://www.udemy.com/course/learn-figma/) → really good, has many excercise that can make you feel comfortable on how to use figma
5. [Learn UI Design Fundamentals](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwju3-Lv1KnuAhWCX3wKHff6BmQQFjAAegQIAhAC&url=https%3A%2F%2Fscrimba.com%2Flearn%2Fdesign&usg=AOvVaw0APhC4yWLlXDOfQk0cDMAO) → FREE on scrimba, Gary Simon created this course covers the UI Design Fundamentals
6. [Complete Python Developer in 2020: Zero to Mastery](https://www.udemy.com/course/complete-python-developer-zero-to-mastery/) → Really good, teach you from the basic, then covers topic like automation using beautiful soup
7. [React Front to Back](https://www.udemy.com/course/modern-react-front-to-back/) → Great course by Brad Traversy, more like hands-on project using React Context and Redux

## Summary

Learning web development can be very tiring because there are so many things that need to be covered from the very basic like HTML, CSS, JS, then you need to learn Git for version control, frontend framework, styling framework, backend services, database. But, you will eventually understand it with some time.

But, if you enjoy doing web development, watching these videos will feel like entertainment, you learn new stuff every day and keeps investing yourself with knowledge. Also, try to not only watching the video but follow along with the code and make your own project. It was the fastest way to learn for me.

Goodluck! Contact me via email (check the footer) if you need some personal recommendation, I will be glad to help you!

Pro Tips: change the playback speed to 1.5x speed to make your productivity 1.5x faster
